<template>
  <div class="admin-swagger">
    <div id="swagger-ui" class="info" v-if="$ala.isBuild()"></div>
    <div v-if="!$ala.isBuild()" class="title">
      非开发环境暂不支持Api文档查看，请通过发布的后台查看
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
export default {
    data () {
      return {}
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        if (!this.$ala.isBuild()) {
          return
        }
        // var apiUrl = this.$ala.clientHost() + 'swagger/v1/swagger.json'
        var apiUrl = '/swagger.json'
        // eslint-disable-next-line
        /* eslint-disable */

        const s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "http://ui.5ug.com/static/swagger-ui/swagger-ui-bundle.js";
        document.body.appendChild(s);

        const w = document.createElement("script");
        w.type = "text/javascript";
        w.src =
          "http://ui.5ug.com/static/swagger-ui/swagger-ui-standalone-preset.js";
        document.body.appendChild(w);

        let css = document.createElement("link");
        css.href = "http://ui.5ug.com/static/swagger-ui/swagger-ui.css";
        css.rel = "stylesheet";
        css.type = "text/css";
        document.head.appendChild(css);

        window.onload = function () {
          // Begin Swagger UI call region
          const ui = SwaggerUIBundle({
            url: apiUrl,
            dom_id: "#swagger-ui",
            deepLinking: true,
            presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
            plugins: [SwaggerUIBundle.plugins.DownloadUrl],
            layout: "StandaloneLayout"
          });
          window.ui = ui;
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .topbar {
    display: none;
  }
  .loading-container {
    .info {
      border: none;
    }
  }
  .info {
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
  }
  .admin-swagger {
    min-height: 450px;
    .title {
      font-size: 1.8rem;
      padding: 20px;
      text-align: center;
      margin-top: 50px;
    }
  }
</style>
